<template>
  <div class="header-bar">
    <div class="title">{{ title }}</div>
    <div class="pic">
      <el-popover placement="bottom" v-model:visible="visible">
        <div @click="loginOut" class="loginOut">退出登录</div>
        <template #reference>
          <el-avatar @click="visible = true" :src="imgUrl" :size="30" />
        </template>
      </el-popover>
    </div>
  </div>
</template>

<script>
// toRefs  需要reactive对象
import { computed, reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const data = reactive({
      visible: false,
      imgUrl: "http://localhost:8081/image/picImg.jpg",
    });
    const { visible, imgUrl } = toRefs(data);
    const title = computed(() => {
      switch (route.path) {
        case "/home/index":
          return "Management Articles";
        case "/home/edit":
          return "Edit Articles";
        case "/home/tags":
          return "Management Tags";
        case "/home/msg":
          return "Management Msg";
        case "/home/friend":
          return "Management Links";
        default:
          return "";
      }
    });
    const loginOut = () => {
      router.push("/");
    };
    return {
      title,
      imgUrl,
      visible,
      loginOut,
    };
  },
};
</script>

<style lang="scss">
.header-bar {
  background-image: radial-gradient(circle, #69492e, #545c64);
  display: flex;
  border-bottom: 2px solid #ccc;
  color: #fff;
  padding: 2rem 0;
  .title {
    font-size: 1.5rem;
    flex: 90%;
    text-align: center;
  }
  .pic {
    flex: 10%;
    text-align: center;
  }
}
</style>